<template>
  <page-header-wrapper :title="false">
    <a-row :gutter="20">
      <a-col :span="4">
        <a-card title="今日数据" :style="{ height: '325px' }">
          <div class="data-list">
            <div class="data-list-item">
              <div class="data-list-item-title">超时未联系</div>
              <div class="data-list-item-tag">
                <a-tag color="#2db7f5">
                  20
                </a-tag>
              </div>
            </div>
            <div class="data-list-item">
              <div class="data-list-item-title">新资源未领取</div>
              <div class="data-list-item-tag">
                <a-tag color="#fa8c16">
                  20
                </a-tag>
              </div>
            </div>
            <div class="data-list-item">
              <div class="data-list-item-title">业务更新通知剩余</div>
              <div class="data-list-item-tag">
                <a-tag color="#f50">
                  20
                </a-tag>
              </div>
            </div>
            <div class="data-list-item">
              <div class="data-list-item-title">老客户回访剩余</div>
              <div class="data-list-item-tag">
                <a-tag color="#108ee9">
                  20
                </a-tag>
              </div>
            </div>
            <div class="data-list-item">
              <div class="data-list-item-title">新资源加油站剩余</div>
              <div class="data-list-item-tag">
                <a-tag color="#87d068">
                  20
                </a-tag>
              </div>
            </div>
            <div class="data-list-item">
              <div class="data-list-item-title">团队任务剩余</div>
              <div class="data-list-item-tag">
                <a-tag color="#f50">
                  20
                </a-tag>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card title="任务奖励" :style="{ height: '325px' }">
          <a-row>
            <a-col :span="24">
              <Carousel
                arrows
                :dots="false"
                :autoplay="true"
              >
                <div v-for="(item, index) in 3" :key="index">
                  <a-row :gutter="20">
                    <a-col :span="4" v-for="(item, index) in 6" :key="index">
                      <div class="mission-item">
                        <div class="mission-avatar" data-i="item">
                          <img src="../../assets/images/adviser/jb.png">
                        </div>
                        <div class="mission-detail">
                          <div class="mission-title">
                            条件：专利20件
                          </div>
                          <div class="mission-time">
                            限时：当月
                          </div>
                          <a-button disabled type="danger" size="small" shape="round" :style="{ marginTop: '10px' }">
                            领取
                          </a-button>
                        </div>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </Carousel>
            </a-col>
          </a-row>
          <div class="mission-footer">
            <a-row>
              <a-col :span="2">
                <h4>已完成</h4>
              </a-col>
              <a-col :span="21"></a-col>
              <a-col :span="1" :style="{ textAlign: 'right' }">
                <a-button type="link" size="small" @click="() => this.$router.push({ path: '/my/got' })">
                  详情>
                </a-button>
              </a-col>
            </a-row>
          </div>
        </a-card>
      </a-col>
      <a-col :span="4">
        <a-card title="当前业绩" :style="{ height: '325px' }">
          <a-row>
            <a-col :span="4">
              <a-icon :style="{ fontSize: '20px', color: '#ff4d4f' }" theme="filled" type="pay-circle" />
            </a-col>
            <a-col :span="20" class="mb10">
              <span class="font18">当前业绩</span>
            </a-col>
          </a-row>
          <a-row class="mb20">
            <a-col :span="4"></a-col>
            <a-col :span="20">
              <a-statistic
                :value="4500.00"
                :precision="2"
                style="margin-right: 50px"
              >
                <template #suffix>
                  <a-icon :style="{ fontSize: '18px', color: '#3f8600' }" type="arrow-up" />
                </template>
              </a-statistic>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4" class="mb10">
              <a-icon :style="{ fontSize: '20px', color: '#ff4d4f' }" type="team" />
            </a-col>
            <a-col :span="20">
              <span class="font18">当前排名</span>
            </a-col>
          </a-row>
          <a-row class="mb20">
            <a-col :span="4"></a-col>
            <a-col :span="20">
              <span class="font18">
                <a-statistic
                  :value="2"
                  style="margin-right: 50px"
                >
                  <template #suffix>
                    <a-icon :style="{ fontSize: '18px', color: '#cf1322' }" type="arrow-down" />
                  </template>
                </a-statistic>
              </span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <a-icon type="folder" :style="{ fontSize: '20px', color: '#ff4d4f' }" theme="filled" />
            </a-col>
            <a-col :span="20">
              <span class="font18">入职第<b>185</b>天</span>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <a-card title="我的数据" :style="{ marginTop: '20px' }">
      <a-tabs type="card">
        <a-tab-pane key="1" tab="已拨打电话">
          <call></call>
        </a-tab-pane>
        <a-tab-pane key="2" tab="已成单合同">
          <contract></contract>
        </a-tab-pane>
        <a-tab-pane key="3" tab="已成单业务">
          <business></business>
          <!--          <v-chart-->
          <!--            ref="businessChart"-->
          <!--            :forceFit="true"-->
          <!--            :height="400"-->
          <!--            :scale="businessScale"-->
          <!--            :data="businessData"-->
          <!--          >-->
          <!--            <v-tooltip/>-->
          <!--            <v-axis dataKey="type" :label="label" :tickLine="tickLine" />-->
          <!--            <v-axis dataKey="number" :label="label" :title="title" />-->
          <!--            <v-interval position="type*number" :adjust="adjust" color="month"/>-->
          <!--          </v-chart>-->
        </a-tab-pane>
        <a-tab-pane key="4" tab="未成单客户">
          <customer></customer>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import call from './charts/call'
  import contract from './charts/contract'
  import business from './charts/business'
  import customer from './charts/customer'
  import { Carousel } from 'ant-design-vue'
  export default {
    components: {
      Carousel,
      call,
      contract,
      business,
      customer
    },
    name: 'State',
    data () {
      return {
      }
    },
    mounted () {},
    methods: {
    }
  }
</script>

<style scoped>
  .data-list .data-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 17px;
  }
  .mission-detail {
    text-align:center;
  }
  .mission-avatar img {
    width: 70px;
    display: block;
    margin: 0 auto;
  }
  .mission-footer {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .mb20 {
    margin-bottom: 25px;
  }
  .font18 {
    font-size: 18px;
  }
</style>
